<template>
  <view :data-theme="globPrimary">
    <u-navbar :title="moduleTitle"></u-navbar>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      :down="downOption"
      :up="upOption"
      @init="mescrollInit"
      @down="getRollupDetailData"
    >
      <view class="u-skeleton">
        <view class="rollup-head">
          <view class="u-flex u-line-1 u-skeleton-rect">
            <view class="bag" v-if="rollupData.has_bought == 1 || rollupData.user_price == 0">
              <u-image
                width="72"
                height="32"
                v-if="rollupData.has_bought == 1"
                src="@/static/images/yigouamai.png"
              ></u-image>
              <u-image
                width="72"
                height="32"
                v-if="rollupData.user_price == 0"
                src="@/pageFound/static/images/free.png"
              >
              </u-image>
            </view>
            <view class="title u-line-1">{{ rollupData.title }}</view>
          </view>
          <view class="content u-line-3 u-skeleton-rect" v-if="!$u.test.empty(rollupData.intro)">{{
            rollupData.intro
          }}</view>
          <view class="u-flex u-row-between bottom">
            <view class="u-flex u-skeleton-rect">
              <view class="count">{{ rollupData.paper_count }}套</view>
              <u-line direction="col" length="16rpx" color="#E4E7ED" margin="0 16rpx"></u-line>
              <view class="count">{{ rollupData.practice_count }}人已练习</view>
            </view>
            <view class="btn u-skeleton-fillet">
              <edu-button
                type="primary"
                size="medium"
                shape="circle"
                @click="onBuy(rollupData.id)"
                v-if="rollupData.user_price > 0 && rollupData.has_bought == 0"
                >{{ rollupData.user_price | formatCurrency(null, 0) }} | 购买</edu-button
              >
              <edu-button
                type="primary"
                size="medium"
                shape="circle"
                @click="onAnswer(rollupData.id, paperId)"
                v-else
                >开始答题</edu-button
              >
            </view>
          </view>
        </view>

        <u-gap height="20" bg-color="#f7f7f7"></u-gap>
        <view
          class="rollup-item u-border-bottom"
          v-for="item in rollupData.rollup_paper"
          :key="item.paper_id"
        >
          <view
            class="title u-line-1 u-skeleton-rect"
            @click="onAnswer(rollupData.id, item.paper_id)"
          >
            {{ item.title }}
          </view>
          <view class="u-flex u-row-between bottom">
            <view class="count u-skeleton-rect">{{ item.practice_count }}人练习</view>
            <u-icon
              name="fankui"
              custom-prefix="edu-icon"
              size="44"
              :color="btnColor"
              @click="onAnswer(rollupData.id, item.paper_id)"
            ></u-icon>
          </view>
        </view>
      </view>
    </mescroll-body>
    <u-skeleton
      :loading="loading"
      el-color="#f7f7f7"
      bg-color="#fff"
      border-radius="28"
    ></u-skeleton>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      downOption: { auto: false },
      upOption: { use: false },
      moduleTitle: '', // 模块标题
      rollupData: {
        title: '加载中',
        intro: '加载中',
        paper_count: 0,
        practice_count: 0,
        rollup_paper: [
          {
            title: '加载中',
            practice_count: 0,
          },
          {
            title: '加载中',
            practice_count: 0,
          },
          {
            title: '加载中',
            practice_count: 0,
          },
        ],
      },
      loading: false,
      rollupId: 0,
      paperId: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      return windowHeight - this.globNavbarHeight - this.globStatusBarHeight + 'px'
    },
    btnColor() {
      if (this.rollupData.user_price > 0 && this.rollupData.has_bought == 0) {
        return '#B7BAC1'
      } else {
        return this.globPrimaryColor
      }
    },
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    uni.$u.route({ type: 'tab', url: 'pages/exam/index' })
    return true
  },
  onLoad(option) {
    this.moduleTitle = option.title
    this.rollupId = option.id
    this.paperId = option.paper_id
    this.loading = true
  },
  onShow() {
    this.getRollupDetailData()
  },
  methods: {
    getRollupDetailData() {
      this.$edu.api
        .getRollDetail({
          rollup_id: this.rollupId,
        })
        .then((res) => {
          setTimeout(() => {
            this.rollupData = res.data
            this.loading = false
            this.mescroll.endSuccess(1)
          }, 300)
        })
    },
    // 购买
    onBuy(id) {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/exam/pay', {
          id: id,
          key: 'rollup',
        })
      })
    },
    // 答题
    onAnswer(rollup_id, paper_id) {
      this.$edu.judgeLogin(() => {
        if (this.rollupData.has_bought == 1 || this.rollupData.user_price == 0) {
          this.$u.route('/pageFound/exam/rollup/topic', {
            id: rollup_id,
            paper_id: paper_id,
          })
        } else {
          this.$u.toast('请先购买')
        }
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.rollup-head {
  padding: 28rpx 30rpx;
  .bag {
    margin-right: 10rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #303133;
    font-weight: bold;
  }
  .content {
    margin-top: 12rpx;
    font-size: 24rpx;
    color: #909399;
    line-height: 36rpx;
  }
  .bottom {
    margin-top: 12rpx;
  }
  .count {
    font-size: 24rpx;
    color: #888888;
  }
  ::v-deep .edu-btn {
    height: 56rpx;
    min-width: 188rpx;
    line-height: 56rpx;
    padding: 0 20rpx;
  }
}

.rollup-item {
  padding: 30rpx 30rpx 20rpx;
  .title {
    max-width: 90%;
    font-size: 30rpx;
    color: #303133;
  }
  .bottom {
    margin-top: 26rpx;
  }
  .count {
    font-size: 22rpx;
    color: #909399;
  }
}
</style>
